<template>
  <div class="jike" v-if="data">
    <jike-header @child-event="handleChildEvent"></jike-header>
    <div class="main">
      <div class="flex">
        <div class="map">
          <AllMap :data="data.province_list"></AllMap>
          <MapProgress
            :nationalActNum="data.national_act_num"
            :nationalTargetNum="data.national_target_num"
            :theaterList="data.theater_list"
            :siteTypeList="data.site_type_list"
          ></MapProgress>
        </div>
        <div class="right-top">
          <BoxContainer title="一级指标情况">
            <FirstLevelIndicator
              :data="data.index_info"
              v-if="data.index_info.length"
            ></FirstLevelIndicator>
          </BoxContainer>
          <BoxContainer title="失分频次展示"
            ><FrequencyLosePoint
              :data="data.index_deduct_list"
              v-if="data.index_deduct_list.length"
            ></FrequencyLosePoint
          ></BoxContainer>
          <!-- <BoxContainer title="门店排名情况" :isDesc="true"
            ></BoxContainer> -->
          <StoreRanking
            title="门店排名情况"
            :topData="data.top5"
            :bottomData="data.bottom5"
            v-if="data.top5.length"
          ></StoreRanking>
          <BoxContainer title="失分高频展示"
            ><HighLosePoint
              :data="data.month_deduct_top3"
              v-if="data.month_deduct_top3.length"
            ></HighLosePoint
          ></BoxContainer>
        </div>
      </div>
      <div class="flex h-auto">
        <div class="left-bottom">
          <HeaderBox title="战区落实率"
            ><LeftBottom :data="data.theater_implement_rate"></LeftBottom
          ></HeaderBox>
        </div>
        <div class="right-bottom">
          <RHeaderBox title="指标落实率"
            ><RightBottom :data="data.index_implement_rate"></RightBottom
          ></RHeaderBox>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, onUnmounted, watch } from 'vue'
import { getVisualization } from '@/api/deliver'
import FirstLevelIndicator from './right/FirstLevelIndicator.vue'
import StoreRanking from './right/StoreRanking.vue'
import HighLosePoint from './right/HighLostPoint.vue'
import FrequencyLosePoint from './right/FrequencyLosePoint.vue'
import AllMap from './map/AllMap.vue'
import RightBottom from './right-bottom/index.vue'
import LeftBottom from './left-bottom/index.vue'
import JikeHeader from './header/index.vue'
import BoxContainer from '@/components/BoxContainer/index.vue'
import MapProgress from './map/MapProgress.vue'
import HeaderBox from './left-bottom/HeaderBox.vue'
import RHeaderBox from './right-bottom/HeaderBox.vue'
const childMessage = ref('')

const handleChildEvent = (message) => {
  childMessage.value = message
}
const data = ref(null)
let timer = null

const loadData = async () => {
  const parms = {
    month_year: childMessage.value || getCurrentYearMonth(),
  }
  data.value = await getVisualization(parms)
  // data.value.index_info[1].rate = Math.floor(Math.random() * 100) + 1
  // console.log(data.value)
}
function getCurrentYearMonth() {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1，并补零
  return `${year}/${month}`
}
onMounted(() => {
  loadData()
  // timer = setInterval(() => {
  //   loadData()
  // }, 1000 * 10)
})
// onUnmounted(() => {
//   clearInterval(timer)
// })
watch(
  () => childMessage.value,
  (newValue) => {
    loadData()
  },
)
</script>
<style lang="scss" scoped>
.jike {
  height: 100%;
  background: #181818;
  overflow-x: hidden;
  .main {
    // height: 100%;
    background: #181818;
    overflow: hidden;
  }
}
.flex {
  display: flex;
  justify-content: center;
}
.mt-top {
  margin-top: 16px;
}
.map {
  position: relative;
  width: 924px;
  height: 570px;
}
// .h-auto {
//   height: calc(100% - 684px);
// }
.right-top {
  // flex: 1;
  width: 936px;
  display: flex;
  flex-wrap: wrap;
  height: 570px;
  margin-left: 16px;
  .box:nth-of-type(2n + 1) {
    margin-right: 10px;
  }
  .box:first-child {
    margin-bottom: 10px;
  }
}
.left-bottom {
  background-color: #363636;
  width: 924px;
  height: 384px;
  // height: 100%;
  margin-top: 16px;
}

.right-bottom {
  width: 936px;
  height: 384px;
  // height: 100%;
  margin-left: 16px;
  margin-top: 16px;
}
</style>
